﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!-- Title and other stuffs -->
    <title>音乐列表</title>
    <!-- Stylesheets -->
    <link href="style/bootstrap.css" rel="stylesheet">
    <!-- Font awesome icon -->
    <link rel="stylesheet" href="style/font-awesome.css">
    <!-- jQuery UI -->
    <link rel="stylesheet" href="style/jquery-ui.css">
    <!-- Calendar -->
    <link rel="stylesheet" href="style/fullcalendar.css">
    <!-- prettyPhoto -->
    <link rel="stylesheet" href="style/prettyPhoto.css">
    <!-- Star rating -->
    <link rel="stylesheet" href="style/rateit.css">
    <!-- Date picker -->
    <link rel="stylesheet" href="style/bootstrap-datetimepicker.min.css">
    <!-- CLEditor -->
    <link rel="stylesheet" href="style/jquery.cleditor.css">
    <!-- Bootstrap toggle -->
    <link rel="stylesheet" href="style/bootstrap-switch.css">
    <!-- Main stylesheet -->
    <link href="style/style.css" rel="stylesheet">
    <!-- Widgets stylesheet -->
    <link href="style/widgets.css" rel="stylesheet">

    <!-- HTML5 Support for IE -->
    <!--[if lt IE 9]>
      <script src="js/html5shim.js"></script>
      <![endif]-->
</head>

<body>

    <!-- Header starts -->
    <header>
        <div class="container">
            <div class="row">

                <!-- Logo section -->
                <div class="col-md-4">
                    <!-- Logo. -->
                    <div class="logo">
                        <h1><a href="#">后台管理系统<span class="bold"></span></a></h1>
                    </div>
                    <!-- Logo ends -->
                </div>

            </div>
        </div>
    </header>
    <!-- Header ends -->

    <!-- Main content starts -->

    <div class="content">

        <!-- Sidebar -->
        <div class="sidebar">
            <ul id="nav">
                <li><a href="music_list.html" class="open"><i class="icon-table"></i>音乐列表</a></li>
                <li><a href="music_edit.html"><i class="icon-tasks"></i>音乐添加</a></li>
            </ul>
        </div>


        <!-- Main bar -->
        <div class="mainbar">

            <!-- Matter -->

            <div class="matter">
                <div class="container">

                    <!-- Table -->

                    <div class="row">

                        <div class="col-md-12">

                            <div class="widget">

                                <div class="widget-head">
                                    <div class="pull-left">音乐列表</div>
                                    <div class="widget-icons pull-right">
                                        <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
                                        <a href="#" class="wclose"><i class="icon-remove"></i></a>
                                    </div>
                                    <div class="clearfix"></div>
                                </div>

                                <div class="widget-content">

                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>音乐名称</th>
                                                <th>音乐地址</th>
                                                <th>是否使用</th>
                                                <th>排序</th>
                                                <th>封面</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableList">
                                        </tbody>
                                    </table>

                                    <!--                                        <div class="widget-foot">

                                            <ul class="pagination pull-right">
                                                <li><a href="#">Prev</a></li>
                                                <li><a href="#">1</a></li>
                                                <li><a href="#">2</a></li>
                                                <li><a href="#">3</a></li>
                                                <li><a href="#">4</a></li>
                                                <li><a href="#">Next</a></li>
                                            </ul>

                                            <div class="clearfix"></div>

                                        </div>-->

                                </div>

                            </div>

                        </div>

                    </div>

                </div>
            </div>

            <!-- Matter ends -->

        </div>

        <!-- Mainbar ends -->
        <div class="clearfix"></div>

    </div>
    <!-- Content ends -->

    <!-- Footer starts -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <!-- Copyright info -->
                    <p class="copy">Copyright &copy; 2015 | <a href="#">安静</a> </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Footer ends -->




    <!-- Scroll to top -->
    <span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span>

    <!-- JS -->
    <script src="js/jquery.js"></script>
    <!-- jQuery -->
    <script src="js/bootstrap.js"></script>
    <!-- Bootstrap -->
    <script src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <!-- jQuery UI -->
    <script src="js/fullcalendar.min.js"></script>
    <!-- Full Google Calendar - Calendar -->
    <script src="js/jquery.rateit.min.js"></script>
    <!-- RateIt - Star rating -->
    <script src="js/jquery.prettyPhoto.js"></script>
    <!-- prettyPhoto -->

    <!-- jQuery Flot -->
    <script src="js/excanvas.min.js"></script>
    <script src="js/jquery.flot.js"></script>
    <script src="js/jquery.flot.resize.js"></script>
    <script src="js/jquery.flot.pie.js"></script>
    <script src="js/jquery.flot.stack.js"></script>

    <!-- jQuery Notification - Noty -->
    <script src="js/jquery.noty.js"></script>
    <!-- jQuery Notify -->
    <script src="js/themes/default.js"></script>
    <!-- jQuery Notify -->
    <script src="js/layouts/bottom.js"></script>
    <!-- jQuery Notify -->
    <script src="js/layouts/topRight.js"></script>
    <!-- jQuery Notify -->
    <script src="js/layouts/top.js"></script>
    <!-- jQuery Notify -->
    <!-- jQuery Notification ends -->


    <script type="text/javascript">

        $(document).ready(function () {
            $.ajax({
                url: "/api/getMusicList.php",
                type: "post",
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    var table;
                    if (data != null) {
                        for (var i = 0; i < data.length; i++) {
                            table += "<tr><td>" + data[i].ID + "</td><td>" + data[i].MusicName + "</td><td>" + data[i].MusicUrl + "</td><td>" + data[i].IsUse + "</td><td>" + data[i].Sort + "</td><td>" + data[i].CoverImage + "</td><td>编辑</td></tr>";
                        }
                        $("#tableList").html(table);
                    }
                }
            });
        });

    </script>

</body>
</html>